<!--
 * @Description: 面包屑导航组件
 * @Author: 陈三愿
 * @Date: 2025-09-14 22:47:00
 * @LastEditTime: 2025-09-14 22:47:00
-->
<script setup lang="ts">
import { computed } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();

// 根据当前路由生成面包屑数据
const breadcrumbs = computed(() => {
  const pathArray = route.path.split('/').filter(Boolean);
  
  // 始终包含首页
  const crumbs = [
    {
      name: '首页',
      path: '/',
      disabled: route.path === '/'
    }
  ];
  
  // 构建面包屑路径
  let currentPath = '';
  pathArray.forEach((segment, index) => {
    currentPath += `/${segment}`;
    
    // 将路径片段转换为更友好的名称（可以根据实际需求自定义）
    const name = segment.charAt(0).toUpperCase() + segment.slice(1).replace(/-/g, ' ');
    
    crumbs.push({
      name,
      path: currentPath,
      disabled: index === pathArray.length - 1 // 最后一项禁用点击
    });
  });
  
  return crumbs;
});
</script>

<template>
  <div class="text-sm breadcrumbs">
    <ul>
      <li v-for="(crumb, index) in breadcrumbs" :key="index">
        <NuxtLink v-if="!crumb.disabled" :to="crumb.path">{{ crumb.name }}</NuxtLink>
        <span v-else class="opacity-70">{{ crumb.name }}</span>
      </li>
    </ul>
  </div>
</template>